<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分类管理</title>
<link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}"
	rel="icon" type="image/x-ico">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" href="../../static/css/me.css"
	th:href="@{/css/me.css}">
</head>
<body>

	<!--导航栏-->
	<nav class="ui inverted gird-header">
		<div class="ui container">
			<div class="ui inverted secondary stackable menu">
				<h2 class="ui olive header item"
					style="color: transparent;-webkit-text-stroke: 1px black; letter-spacing: 0.04em">管理后台</h2>
				<a href="#" th:href="@{/admin/blogs}"
					class="m-item item m-mobile-hide"><i class="home icon"></i>文章管理</a>
				<a href="#" th:href="@{/admin/types}"
					class="active m-item item m-mobile-hide"><i
					class="clone outline icon"></i>分类管理</a> <a href="#"
					th:href="@{/admin/friendlinks}" class="m-item item m-mobile-hide"><i
					class="pencil alternate icon"></i>友链管理</a> <a href="#"
					th:href="@{/admin/pictures}" class=" m-item item m-mobile-hide"><i
					class="image icon"></i>相册管理</a>
				<div class="right m-item m-mobile-hide menu">
					<div class="ui dropdown  item">
						<div class="text">
							<img class="ui avatar image" src="/images/me.jpg"> <span
								th:text="${session.user.nickname}">oneStar</span>
						</div>
						<i class="dropdown icon"></i>
						<div class="menu">
							<a href="#" th:href="@{/admin/logout}" class="item">注销</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a href="#"
			class="ui menu toggle black icon button m-right-top m-mobile-show">
			<i class="sidebar icon"></i>
		</a>
	</nav>

	<div class="m-padded-tb-hugex">
		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a href="#" th:href="@{/admin/types/input}" class="item">新增</a> <a
						href="#" th:href="@{/admin/types}" class="teal active item">列表</a>
				</div>
			</div>
		</div>
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<!--中间内容-->
	<div class="m-padded-tb-big">
		<div class="ui container">
			<div class="ui success message"
				th:unless="${#strings.isEmpty(message)}">
				<i class="close icon"></i>
				<div class="" th:text="|提示： ${message}">提示：操作成功！</div>
			</div>
			<table class="ui compact teal table">
				<thead>
					<tr align="center">
						<th>ID</th>
						<th>名称</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr align="center" th:each="type,iterStat : ${pageInfo.list}">
						<td th:text="${iterStat.count}">1</td>
						<td th:text="${type.name}">我的故事</td>
						<td><a href="#"
							th:href="@{/admin/types/{id}/input(id=${type.id})}"
							class="ui mini teal basic button">编辑</a> <a href="#"
							th:href="@{/admin/types/{id}/delete(id=${type.id})}"
							onclick="return confirm('确定要删除该分类吗？三思啊! 删了可就没了！')"
							class="ui mini red basic button">删除</a></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<th colspan="6">
							<div class="ui inverted divided stackable grid">
								<div class="three wide column" align="center">
									<a class="item"
										th:href="@{/admin/types(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"
										th:unless="${pageInfo.isFirstPage}">上一页</a>
								</div>

								<div class="ten wide column" align="center">
									<p>
										第 <span th:text="${pageInfo.pageNum}"></span> 页，共 <span
											th:text="${pageInfo.pages}"></span> 页，有 <span
											th:text="${pageInfo.total}"></span> 个分类
									</p>
								</div>

								<div class="three wide column" align="center">
									<a class="item"
										th:href="@{/admin/types(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"
										th:unless="${pageInfo.isLastPage}">下一页</a>
								</div>
							</div>
							<div align="center">
								<a href="#" th:href="@{/admin/types/input}">
									<button type="button"
										class="ui teal button m-mobile-wide m-margin-top">
										<i class="pencil icon"></i>新增
									</button>
								</a>
							</div>
						</th>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>

	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<!--底部栏-->


	<script
		src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

	<script>
		// $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");

		$('#blog-message').load(
		/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");
		/* // 运行时间统计
		function secondToDate(second) {
		    if (!second) {
		        return 0;
		    }
		    var time = new Array(0, 0, 0, 0, 0);
		    if (second >= 365 * 24 * 3600) {
		        time[0] = parseInt(second / (365 * 24 * 3600));
		        second %= 365 * 24 * 3600;
		    }
		    if (second >= 24 * 3600) {
		        time[1] = parseInt(second / (24 * 3600));
		        second %= 24 * 3600;
		    }
		    if (second >= 3600) {
		        time[2] = parseInt(second / 3600);
		        second %= 3600;
		    }
		    if (second >= 60) {
		        time[3] = parseInt(second / 60);
		        second %= 60;
		    }
		    if (second > 0) {
		        time[4] = second;
		    }
		    return time;
		}
		function setTime() {
		    /*此处为网站的创建时间
		    var create_time = Math.round(new Date(Date.UTC(2020, 01, 25, 15, 15, 15)).getTime() / 1000);
		    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
		    currentTime = secondToDate((timestamp - create_time));
		    currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
		        + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
		        + '秒';
		    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
		}
		setInterval(setTime, 1000); */

		$('.menu.toggle').click(function() {
			$('.m-item').toggleClass('m-mobile-hide');
		});

		$('.ui.dropdown').dropdown({
			on : 'hover'
		});

		//消息提示关闭初始化
		$('.message .close').on('click', function() {
			$(this).closest('.message').transition('fade');
		});
	</script>
</body>
</html>